<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的面试题库</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4096ff',
                        success: '#52c41a',
                        warning: '#faad14',
                        danger: '#ff4d4f',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#dcdfe6',
                            400: '#c0c4cc',
                            500: '#909399',
                            600: '#606266',
                            700: '#303133',
                            800: '#1e1e1e',
                        },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        card: '0 4px 12px rgba(0, 0, 0, 0.08)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        /* 在现有样式中添加 */
        #suggestionSection {
            @apply border border-neutral-200 rounded-lg p-3 mb-4;
        }
        #suggestionContent {
            @apply text-neutral-700;
        }

        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .question-card {
                @apply bg-white rounded-lg shadow-card p-4 mb-4 transition-all duration-300 hover:shadow-lg;
            }

            .status-badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }

            /* 初始隐藏：使用 display: none */
            .empty-state {
                display: none; /* 初始隐藏 */
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding-top: 4rem;
                padding-bottom: 4rem;
                color: rgb(144 147 153);
            }

            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98];
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen font-inter">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-graduation-cap text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-neutral-700">面试助手</h1>
        </div>
        <nav>
            <ul class="flex space-x-6">
                <li><a href="/view/quesList.html" class="text-primary font-medium border-b-2 border-primary pb-1"><i
                        class="fa fa-list-alt mr-1"></i>我的题库</a></li>
                <li><a href="/view/chicken.html" class="text-neutral-600 hover:text-primary transition-colors"><i
                        class="fa fa-home mr-1"></i>我的小助手</a></li>
                <li><a href="/view/userInfo.html" class="text-neutral-600 hover:text-primary transition-colors"><i
                        class="fa fa-cog mr-1"></i>个人主页</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 主要内容 -->
<main class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 页面标题 -->
    <div class="mb-8 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700">我的面试准备</h2>
        <p class="text-neutral-500 mt-2">专注于提升你的技术能力和面试表现</p>
    </div>

    <!-- 筛选栏 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6 flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center space-x-4">
            <div class="relative">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                <input type="text" id="searchInput" placeholder="搜索问题..."
                       class="pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary transition-all">
            </div>
            <select id="statusFilter"
                    class="px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary transition-all">
                <option value="">所有状态</option>
                <option value="0">未回答</option>
                <option value="1">已回答</option>
            </select>
        </div>
        <button id="addQuestionBtn" class="btn-primary flex items-center">
            <i class="fa fa-plus mr-2"></i> 自定义面试题
        </button>
    </div>

    <!-- 问题列表 -->
    <div id="questionList" class="space-y-4">
        <!--        &lt;!&ndash; 空状态提示 &ndash;&gt;-->
        <!--        <div class="empty-state">-->
        <!--            <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">-->
        <!--                <i class="fa fa-question-circle text-primary text-3xl"></i>-->
        <!--            </div>-->
        <!--            <h3 class="text-lg font-medium text-neutral-700 mb-2">暂无答题记录</h3>-->
        <!--            <p class="mb-6">点击下方按钮让小助手生成你的专属面试题(输入口令：我的专属面试题)</p>-->
        <!--            <button onclick="window.location.href='chicken.html'" class="btn-primary">-->
        <!--                <i class="fa fa-magic mr-2"></i> 生成专属面试题-->
        <!--            </button>-->
        <!--        </div>-->
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-neutral-800 text-neutral-300 py-8 mt-12">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-graduation-cap text-primary text-xl"></i>
                    <span class="text-lg font-bold text-white">面试助手</span>
                </div>
                <p class="text-sm mt-2">助力你的技术面试准备</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-neutral-400 hover:text-primary transition-colors"><i
                        class="fa fa-github text-xl"></i></a>
                <a href="#" class="text-neutral-400 hover:text-primary transition-colors"><i
                        class="fa fa-twitter text-xl"></i></a>
                <a href="#" class="text-neutral-400 hover:text-primary transition-colors"><i
                        class="fa fa-linkedin text-xl"></i></a>
            </div>
        </div>
        <div class="border-t border-neutral-700 mt-6 pt-6 text-center text-sm">
            &copy; 2025 面试助手 版权所有
        </div>
    </div>
</footer>

<!-- 问题详情模态窗 -->
<div id="questionModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="min-h-screen px-4 py-16 bg-black bg-opacity-75 flex justify-center items-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-3xl relative">
            <button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer">
                <i class="fa fa-times"></i>
            </button>
            <h2 class="text-xl font-bold mb-4 text-neutral-700" id="modalTitle"></h2>

            <!-- 新增：小助手建议区域 -->
            <div id="suggestionSection" class="mb-6">
                <div class="flex items-center mb-2">
                    <span class="text-sm font-medium text-neutral-600">小助手的提升建议：</span>
                </div>
                <div class="bg-neutral-50 p-3 rounded-lg border border-neutral-200" id="suggestionContent"></div>
            </div>

            <!-- 示例答案和得分区域 -->
            <div class="mb-6">
                <div class="flex items-center mb-2">
                    <span class="text-sm font-medium text-neutral-600">示例答案：</span>
                    <div class="ml-2 text-neutral-700" id="exReply"></div>
                </div>
                <div class="flex items-center">
                    <span class="text-sm font-medium text-neutral-600">题目得分：</span>
                    <div class="ml-2 text-primary font-bold" id="point"></div>
                </div>
            </div>

            <!-- 新增：用户回答显示区域 -->
            <div id="userReplyDisplay" class="mb-6 hidden">
                <div class="flex items-center mb-2">
                    <span class="text-sm font-medium text-neutral-600">你的回答：</span>
                </div>
                <div class="bg-neutral-50 p-3 rounded-lg border border-neutral-200" id="userReplyContent"></div>
            </div>

            <div id="modalContent">
                <!-- 回答表单 -->
                <form id="answerForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-neutral-600">你的回答：</label>
                        <textarea id="userReply" name="userReply"
                                  class="mt-1 block w-full rounded-lg border border-neutral-200 px-3 py-2 focus:ring-primary focus:border-primary resize-none h-32"
                                  rows="8" required></textarea>
                    </div>
                    <button type="submit"
                            class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all flex items-center justify-center">
                        <i class="fa fa-check mr-2"></i> 提交回答
                    </button>
                </form>

                <!-- 回答结果（提交后显示） -->
                <div id="answerResult" class="hidden mt-6">
                    <div class="bg-success/10 rounded-lg p-4 border border-success/20">
                        <div class="flex items-center mb-2">
                            <i class="fa fa-check-circle text-success mr-2"></i>
                            <span class="font-medium text-success">回答已提交</span>
                        </div>
                        <p class="text-sm text-neutral-600">感谢你的回答，我们已记录你的答案。</p>
                    </div>
                </div>
            </div>

            <div class="mt-4 text-sm text-neutral-500" id="statusText"></div>
        </div>
    </div>
</div>

<!-- 自定义题模态窗 -->
<div id="customQuestionModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="min-h-screen px-4 py-16 bg-black bg-opacity-75 flex justify-center items-center">
        <div class="bg-white rounded-lg p-6 w-full max-w-3xl">
            <button id="closeCustomModal"
                    class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 cursor-pointer">
                <i class="fa fa-times"></i>
            </button>
            <h2 class="text-xl font-bold mb-4 text-neutral-700">新增面试题</h2>

            <form id="customQuestionForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-600">问题描述：</label>
                    <textarea id="customQuesDesc" name="quesDesc"
                              class="mt-1 block w-full rounded-lg border border-neutral-200 px-3 py-2 focus:ring-primary focus:border-primary resize-none h-24"
                              rows="4" required></textarea>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-neutral-600">示例答案：</label>
                    <textarea id="customExReply" name="exReply"
                              class="mt-1 block w-full rounded-lg border border-neutral-200 px-3 py-2 focus:ring-primary focus:border-primary resize-none h-24"
                              rows="4" required></textarea>
                </div>

                <button type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all">
                    <i class="fa fa-save mr-2"></i> 保存题目
                </button>
            </form>
        </div>
    </div>
</div>

<!-- 加载动画 -->
<div id="loading" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="min-h-screen px-4 py-16 bg-black bg-opacity-75 flex justify-center items-center">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">面试鸡正在评估您的答案...</span>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<script src="../js/quesList.js"></script>
</body>
</html>